<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>MissQ校花</title>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/dian.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <link rel="stylesheet" type="text/css" href="css/fxsmall.css" />
    <script src="js/modernizr.custom.js"></script>
    <script src="js/jquery-1.12.3.min.js"></script>
    <style>

    </style>
    <script>
        ;(function(win, doc){
            function change(){
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
            }

            if(doc.documentElement.clientWidth>640){
                doc.documentElement.style.fontSize=20*640/320+'px';
            }else{
                change();
            }


            win.addEventListener('resize', change, false);
        })(window, document);

        function getImg(obj,flog){
            var schoolName,authName;
            $.ajax({
                url: 'http://app.missquq.com/attach/ids',
                jsonp: 'callback',    // cbName
                dataType: 'jsonp', // 使用jsonp
                success: function(json) {
                    console.log(json);
                    obj.attr({
                        src:'http://app.missquq.com'+json.thumbnail,
                        index:json.id
                    });
                    if(flog){
                        $('.dian-text span').html(json.shoolName);
                        $('.dian-text i').html(json.AuthName);
                        $('.dian-text b').html(json.praises);
                    }else{
                        $('.dian-text2 span').html(json.shoolName);
                        $('.dian-text2 i').html(json.AuthName);
                        $('.dian-text2 b').html(json.praises);
                    }
                }
            });
        }

        function sendID(id){
            $.ajax({
                url: 'http://app.missquq.com/attach/clicks',
                data:{
                    id:id
                },
                jsonp: 'callback',    // cbName
                dataType: 'jsonp', // 使用jsonp
                success: function(json) {
//                    console.log(json);

                }
            });
        }
        $(function(){
            //动画控制部分
            $('.dian-xing3').css({'-webkit-animation':'twinkling 1s infinite ease-in-out 0.3s','animation-iteration-count':'5'});
            $('.dian-xing4').css({'-webkit-animation':'twinkling 1s infinite ease-in-out 0.5s','animation-iteration-count':'5'});
            $('.dian-xing2').css({'-webkit-animation':'twinkling 1s infinite ease-in-out','animation-iteration-count':'5'});
            $('.dian-xing1').css({'-webkit-animation':'twinkling 1s infinite ease-in-out','animation-iteration-count':'2'});
            $('.dian-title1').addClass('animated bounceInLeft');
            $('.dian-title2').addClass('animated bounceInRight');
            setTimeout(function(){
                $('.dian-xing1').addClass('xing');
                $('.dian-title1').removeClass('animated bounceInLeft').animate({top:'1rem',width:'8.05rem',left: '4.15rem'},1000);
                $('.dian-title2').removeClass('animated bounceInRight').animate({top:'4.7rem',width:'7.5rem',left: '4.125rem'},1000);
            },1500);

            setTimeout(function(){
                $('.dian-baiwan,.dian-xuanwo').css('display','block').addClass('animated fadeInLeft');
                $('.dian-xuanwo').css('display','block').addClass('animated fadeInRight');
            },2500);

            setTimeout(function(){
                $('.dian-baituo').css('display','block').addClass('animated fadeInLeft');
            },2700);

            $('.dian-space,.whiteround2T,.whiteround2B').delay(2700).animate({opacity:1},1500,function(){
                $('.whiteround1L,.whiteround1R,.inform').css('display','block').addClass('animated bounceInUp');
                setTimeout(function(){
                    $('.dislike-h').addClass('heart');
                },3000);
            });

            //控制主图翻页部分
            var front=$('.front');
            getImg(front,true);
            $('.whiteround1R').on('click',function(){
                var front1=$('.front');
                var back1=$('.back');
                sendID(front1.attr('index'));

                front1.removeClass().addClass('back');
                back1.removeClass().addClass('front');
                getImg(back1,false);
                $('.dian-text').css('display','none');
                $('.dian-text2').css('display','block');
            });

        });
    </script>
</head>
<body>
<div class="container w640" id="main">
    <div class="bg">
        <img src="img/b_g.jpg"  alt=""/>
        <div class="dian-title">
            <img src="img/dian/diandian1.png" alt="" class="dian-title1"/>
            <img src="img/dian/diandian2.png" alt="" class="dian-title2"/>
        </div>
        <img src="img/dian/baiwan.png" alt="" class="dian-baiwan" style="display: none"/>
        <img src="img/dian/baituo.png" alt="" class="dian-baituo" style="display: none"/>
        <img src="img/dian/xuanwo.png" alt="" class="dian-xuanwo" style="display: none"/>
        <img src="img/dian/xing1.png" class="dian-xing1" alt=""/>
        <img src="img/dian/xing1.png" class="dian-xing3" alt=""/>
        <img src="img/dian/xing2.png" class="dian-xing2" alt=""/>
        <img src="img/dian/xing2.png" class="dian-xing4" alt=""/>
        <div class="dian-space">
            <img src="img/dian/ditu.png" alt=""/>
            <div class="dian-mainImg" >
                <div id="component" class="component component-small fxFPulse">
                    <ul class="itemwrap">
                        <li class="current"><img src="" class="front" index=""/></li>
                        <li><img src="" class="back" index=""/></li>
                    </ul>
                </div>
            </div>
            <p class="dian-text"><span></span><i></i><img src="img/like-num.png" class="praises"/><b></b></p>
            <p class="dian-text2" style="display: none;"><span></span><i></i><img src="img/like-num.png" class="praises"/><b></b></p>
        </div>
    </div>
    <div class="whiteround1L" style="display: none;">
        <img src="img/whiteround1.png" alt=""/>
        <img src="img/dislike.png" alt="" class="dislike"/>
        <span class="whiteround-text">无感</span>
    </div>
    <div class="whiteround1R next" style="display: none;">
        <img src="img/whiteround1.png" alt=""/>
        <img src="img/like1.png" alt="" class="dislike dislike-h"/>
        <span class="whiteround-text">喜欢</span>
    </div>
    <div class="whiteround2T">
        <a href="javascript:;"><img src="img/whiteround2.png" alt=""/></a>
    </div>
    <a class="inform" href="javascript:;" style="display: none;"><p>举报虚假照片</p></a>
    <div class="whiteround2B">
        <a href="javascript:;"><img src="img/whiteround3.png" alt=""/></a>
    </div>

</div>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
</body>
</html>